<template>
  <div>
    <a-drawer
        v-model:open="playerModalShow"
        :closable="true"
        placement="bottom"
        :maskClosable="false"
        :height="'100%'"
        :headerStyle="headerStyle"
        :bodyStyle="bodyStyle"
        append-to="body"
    >
      <div class="player-container">
        <div class="player-header">
          <CaretDownOutlined
              class="dropdown-icon"
              @click="closeFullPlayerModal"
          />
        </div>
        <div class="player-body">
          <div class="left-container">
            <a-avatar
                :size="256"
                :src="songPicUrl(song.pic)"
                :class="songImgClass"
            >
            </a-avatar>
            <div>歌手：{{ getSongName(song.name) }}</div>
            <div>歌名：{{ getSingerName(song.name) }}</div>
          </div>
          <div class="middle-container">
            <div class="lyric-container">
              <div
                  ref="lyricRef"
                  class="player-lyric song-content-show"
                  :style="`top:${lyricTop}px`"
              >
                <p
                    v-for="(key, index) in Object.keys(currentMusicLyric)"
                    :class="{
                    active:
                      currentTime >= Number(songKeys[index]) &&
                      currentTime < Number(songKeys[index +1]),
                  }"
                    :key="Number(index)"
                    class="show-lyric"
                >
                  {{ currentMusicLyric[key] }}
                  {{ scrollLyric(index, key) }}
                </p>
              </div>
            </div>
          </div>
          <div class="right-container">

          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
import useFullPlayerModal from "../config/fullPlayerModal.ts";
import type {songType} from "@/types/pageTypes/songs.ts";
// import songStore from "../"
const {song, playingFlag, currentTime, songKeys, currentMusicLyric} =
    defineProps({
      song: {
        type: Object as PropType<songType>,
        default: () => {
        },
      },
      playingFlag: {
        type: Boolean,
        default: false,
      },
      currentTime: {
        type: Number,
        default: 0,
      },
      songKeys: {
        type: Array as PropType<number[] | string[]>,
        default: () => [],
      },
      currentMusicLyric: {
        type: Object,
        default: () => {
        },
      },
    });
const {
  playerModalShow,
  headerStyle,
  bodyStyle,
  songPicUrl,
  getSongName,
  getSingerName,
  openFullPlayerModal,
  closeFullPlayerModal,
} = useFullPlayerModal();

const songImgClass = computed(() => {
  return playingFlag ? "playing" : "paused";
});

const lyricTop = ref<number>(300); // 初始 top 值

const scrollLyric = (index: number, key: string | number) => {
  if (currentTime === Number(key)) {
    lyricTop.value = 300 - 35 * index;
  }
};
onMounted(() => {
  // console.log(songKeys, "song");
});

defineExpose({
  openFullPlayerModal,
});
</script>
<style scoped lang="less">
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.player-container {
  height: calc(100% - 70px);
  position: relative;
  // border-radius: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: url("@/assets/player/player-background.png") no-repeat 0 0/100%
  100%;

  .player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    .dropdown-icon {
      font-size: 24px;
      color: #fff;
    }
  }

  .player-body {
    flex: 1;
    display: flex;

    .left-container {
      flex: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;

      .paused {
        animation: rotate 10s linear infinite;
        animation-play-state: paused;
      }

      .playing {
        animation: rotate 10s linear infinite;
        animation-play-state: running;
      }
    }

    .middle-container {
      flex: 3;

      .lyric-container {
        height: 80%;
        overflow: hidden;
        /* 通过绝对定位固定歌词显示的top,每一次显示高亮歌词，top-30px，达到上移即歌词滚动效果 */
        position: relative;

        .player-lyric {
          position: absolute;
          left: 100px;
          text-align: center;
          // color: white;
          color: #fff;

          .show-lyric {
            margin: 0;
            line-height: 35px;
            font-size: 16px;
            list-style-type: none;
          }

          .active {
            transform: scale(1.5);
            color: yellow;
          }
        }

        .song-content-show {
          margin: 0;
          padding: 1%;
          height: 80%;
        }
      }
    }

    .right-container {
      flex: 2;
    }
  }
}
</style>
